<template>
	<NavBarVue :title="couponGroupData[status]?.title" />
	<view class="wait-consum" v-if="status === '0'">
		<view class="coupon-name">{{couponDetails?.couponName}}</view>
		<view class="validity-period">有效期至 {{couponDetails?.createAt}}</view>
		<view class="QR-code">
			<view class="code-header">
				<view class="top">
					<text>券码</text>
					<view style="display: flex;align-items: center;" @click="shareFriends">
						<!-- <text style="margin-right: 20rpx;">发送给朋友</text> -->
						<button open-type="share">发送给朋友</button>
						<up-icon name="arrow-right" size="20"></up-icon>
					</view>
				</view>
				<view class="bottom">
					<text>{{couponDetails?.shopName}}</text>
				</view>
			</view>
			<view class="code-body">
				<view class="code">
					<BaseCoverImage :src="couponDetails?.couponUrl" />
				</view>
			</view>
		</view>
	</view>
	<view class="useDetails" v-else>
		<view class="details">
			<BaseCoverImage :style="{width: '200rpx',height: '200rpx',marginLeft: '30rpx'}"></BaseCoverImage>
			<view class="" style="margin-left: 20rpx;">
				<view class="h3">{{couponDetails?.couponName}}</view>
				<view class=""><text
						style="font-size: 20rpx;color:orange;margin-left: 10rpx;background: rgb(240,240,240);">随时退</text>&nbsp;
					<text style="font-size: 20rpx;background: rgb(240,240,240);">过期退</text>
				</view>
				<view class="" style="font-size: 26rpx;">{{couponDetails?.describes}}</view>
				<view class="" style="margin-top: 20rpx;"><text
						style="font-size: 50rpx; color: orange;font-weight: bold;">￥688</text> <text
						style="border:1rpx solid orange;color:orange;font-size: 20rpx;margin: 10rpx;padding: 10rpx;">8折热销中</text>
				</view>
			</view>
		</view>
		<image src="/static/stamp.png" style="width:100%;height: 280rpx;margin: 20rpx;"></image>
		<text class="h2">券码信息</text> <text
			style="font-size: 20rpx;color:orange;margin-left: 10rpx;background: rgb(255, 240, 232);">以消费</text>
		<view style="font-size: 20rpx;color: rgb(190,190,190);margin-top: 20rpx;margin-left: 30rpx;">{{couponDetails?.endDate}}到期
		</view>
		<view class="h2" style="">
			· 7011 3928 2929 12
		</view>
		<view class="isolation"></view>
		<view class="merchant">
			<view class="merchant_top">
				<view class="h2">{{couponDetails?.describes}}</view>
				<view
					style="font-size: 26rpx;color: rgb(179, 179, 179);margin-top: 20rpx;margin-left: 30rpx;margin-right: 20rpx;">
					3家门店通用 >
				</view>
			</view>
			<view class="merchant_main">
				<view class="">
					<view  style="margin-left: 30rpx;font-weight: bold;">
						千人食府(中华大厦店)
					</view>
					<view
						style="font-size: 26rpx;color: rgb(179, 179, 179);margin-left: 30rpx;margin-right: 20rpx;display:flex;margin-bottom: 30rpx;">
						<u-icon name="map"></u-icon><text>海淀区上地东路一号院环洋大厦</text>
					</view>
				</view>
				<view style="margin-right: 25rpx"><u-icon name="phone-fill"></u-icon></view>
			</view>
		</view>
		<view class="isolation"></view>
		<view class="menu">
			<view class="h2">
				套餐详情
			</view>
			<view  style="margin-left: 30rpx;font-weight: bold;">
				主菜(2选1)
			</view>
			<view class="p">
				·招牌千岛湖现焖鱼头(半只)(1份)
			</view>
			<view class="p">
				·捞菜黄牛肉
			</view>
		</view>
	</view>
	<TabBarVue />
</template>

<script setup>
	import TabBarVue from '../../../components/TabBar.vue';
	import NavBarVue from '../../../components/NavBar.vue';
	import {onLoad} from '@dcloudio/uni-app'
	import {useUserReceive, useBusinessStore, useChainStore} from '../../../store'
	import {onMounted, ref, reactive} from 'vue'
	
	const userReceive = useUserReceive()
	const useBusiness = useBusinessStore()
	const chainStore = useChainStore()
	const userId = ref(null)
	const couponCode = ref(null)
	const status = ref(null)
	onLoad((e) => {
		userId.value = e.userId
		couponCode.value = e.couponCode
		status.value = e.status
	})
	
	const couponDetails = ref({})
	const couponGroupData = reactive({
			"0": {
				title: "待消费"
			},
			"1": {
				title: "使用详情"
			}
		},
	)
	
	let chainData = ref([])
	onMounted(async () => {
		const res = await userReceive.userReceiveDetial({
			userId: userId.value,
			couponCode: couponCode.value
		})
		couponDetails.value = res?.data
		// await useBusiness.findBusinessId(res?.businessId)
		chainData.value = await chainStore.chainGetAll({
			areaId: 1,
			cityId: 1,
			pageNo: 1,
			pageSize: 10,
			provinceId: 1,
			storeName: res?.data?.shopName
		})
		console.log(chainData.value.objects[0], "| chainData.value");
	})
	
	// 分享给朋友
	function shareFriends() {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 0,
			href: "http://uniapp.dcloud.io/",
			title: "uni-app分享",
			summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
			success: function (res) {
				console.log("success:" + JSON.stringify(res));
			},
			fail: function (err) {
				console.log("fail:" + JSON.stringify(err));
			}
		});
	}

</script>

<style lang="scss" scoped>
	.wait-consum {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;
		background-color: #EAEAEA;
		.coupon-name {
			margin-bottom: 15rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
		}
		.validity-period {
			margin-bottom: 48rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #9C9C9C;
		}
		.QR-code {
			width: 100%;
			// height: 670rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			.code-header {
				display: flex;
				flex-direction: column;
				.top {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 20rpx 20rpx 50rpx;
				}
				.top>text:nth-child(1) {
					font-size: 40rpx;
					color: #222222
				}
				.top>text:nth-last-child(1) {
					font-size: 30rpx;
					color: #9C9C9C
				}
				.top button {
					background-color: transparent;
					border-radius: 0px;
					box-sizing: border-box;
					color: #000;
					display: block;
					font-size: 18px;
					padding-right: 14px;
					text-align: center;
					text-decoration: none;
					border: none !important;
				}
				.bottom {
					font-size: 50rpx;
					padding-left: 50rpx;
				}
			}
			.code-body {
				display: flex;
				justify-content: center;
				align-items: center;
				.code {
					margin-top: 60rpx;
					width: 400rpx;
					height: 400rpx;
					// background-color: #9C9C9C;
				}
			}
		}
		.QR-code::after {
			content: "";
			display: block;
			height: 1px;
			width: 100%;
			position: absolute;
			top: 30%;
			background-color: #EAEAEA;
		}
		.QR-code::before {
			content: "";
			display: block;
			height: 30px;
			width: 15px;
			border-radius: 0 15px 15px 0;
			position: absolute;
			top: calc(30% - 15px);
			left: -2px;
			background-color: #EAEAEA;
		}
	}
	.useDetails {
		overflow-x: hidden;
		.top {

			display: flex;
			background: white;
			height: 100rpx;
			line-height: 100rpx;
			padding: 30rpx;
		}

		.details {
			display: flex;
		}

		.h3 {
			font-size: 30rpx;
			font-weight: bold;
			
		}

		.h2 {
			font-size: 40rpx;
			font-weight: bold;
			padding: 30rpx;

		}

		.isolation {
			width: 100%;
			height: 20rpx;
			background: rgb(240, 240, 240)
		}

		.merchant {
			.merchant_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.merchant_main {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.p{
			margin-left: 30rpx;
				color: rgb(190,190,190);
				margin-top: 20rpx;
				font-size: 26rpx;
		}
	}
</style>